import {ElMessage} from "element-plus";

/**
 * hljs代码高亮添加代码复制的功能
 */
export const hljs_copy_plugin = (block, attr = 'data-original-code') => {
    // 创建外层容器
    const container = document.createElement('div');
    container.style.position = 'relative';
    // 把 pre 移动到 container 中
    block.parentNode.parentNode.insertBefore(container, block.parentNode);
    container.appendChild(block.parentNode);
    // 创建复制按钮
    const copyBtn = document.createElement('div');
    copyBtn.textContent = '复制';
    copyBtn.style.cursor = 'pointer';
    copyBtn.style.fontSize = '12px';
    copyBtn.style.color = '#C7C9D8';
    copyBtn.style.position = 'absolute';
    copyBtn.style.right = '0';
    copyBtn.style.top = '0';
    copyBtn.style.backgroundColor = 'transparent';
    copyBtn.style.padding = '2px 4px';
    // 监听点击事件
    copyBtn.addEventListener('click', () => {
        const text = block.getAttribute(attr);
        navigator.clipboard.writeText(text).then(() => {
            ElMessage({
                message: '复制成功',
                type: 'success',
                duration: 2000
            });
        }).catch(err => {
            console.log(err)
        });
    });
    // 插入按钮
    container.appendChild(copyBtn);
};